<template>
  <!-- 帖子/订单举报页面 -->
  <view class="main">
    <view class="title"> 请选择举报原因 </view>
    <view class="list_">
      <view
        class="row"
        v-for="(item, index) in list_"
        :key="index"
        @click="handleChoose(index)"
      >
        <view class="left">
          {{ item.name }}
        </view>
        <view class="right">
          <image
            src="../../imges/weixuan.png"
            mode="aspectFill"
            v-if="!item.is_choose"
          ></image>
          <image
            src="../../imges/yixuan.png"
            mode="aspectFill"
            v-if="item.is_choose"
            class="xuan"
          ></image>
        </view>
      </view>
    </view>

    <view class="title"> 举例补充说明 </view>

    <view>
      <textarea
        v-model="text"
        placeholder="请输入文字或上传图片证明"
        maxlength="2000"
        class="content"
      />
    </view>

    <view class="title"> 图片（选填） </view>
    <view class="imgs">
      <view class="img" v-if="photo">
        <image :src="photo" mode="aspectFill" @tap="imgsDa"></image>
        <image
          src="../../imges/shanchu1.png"
          mode="aspectFill"
          class="shan"
          @click="imgsShan(index)"
        ></image>
      </view>
      <view class="push" @click="selctPhone" v-if="!photo">
        <image src="../../imges/fazhaopian.png" mode="aspectFill"></image>
      </view>
    </view>

    <view class="footer"> 注：正确选择举报类型，将更容易通过审核处 </view>
    <view class="foot_">
      <view class="btn" @tap="jubao"> 举报 </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      list_: [
        {
          name: "广告",
          is_choose: false,
          id: 0,
        },
        {
          name: "色情",
          is_choose: false,
          id: 1,
        },
        {
          name: "政治有害",
          is_choose: false,
          id: 2,
        },
        {
          name: "图片/文章侵权",
          is_choose: false,
          id: 3,
        },
        {
          name: "身份做假",
          is_choose: false,
          id: 4,
        },
        {
          name: "其他（辱骂、恶意灌水等）",
          is_choose: false,
          id: 5,
        },
      ], //原因数组
      reportType: "",
      invitationId: "",
      text: "",
      photo: "",
      upToken: "",
      qiniuyun: "",
      fileUrl: "",
      type: "",
      typeId: 13,
    };
  },
  onLoad(options) {
    this.invitationId = options.id;
    if (options.type == 2) {
      this.type = 2;
      this.typeId = 18;
    } else {
      this.typeId = 13;
    }
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
        // 'token': token
      },
      data: {},
    }).then((res) => {
      // console.log(res)
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
    });
  },
  methods: {
    handleChoose(index) {
      this.list_.forEach((item, index) => {
        item.is_choose = false;
      });
      this.list_[index].is_choose = true;
      this.reportType = this.list_[index].id;
    },
    selctPhone(e) {
      //点击上传图片
      //let that = this;
      uni.chooseImage({
        count: 1,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          //console.log(tempFilePaths)
          this.photo = tempFilePaths[0];
          uni.uploadFile({
            url: "https://up-z0.qiniup.com",
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              token: this.upToken,
            },
            success: (uploadFileRes) => {
              this.fileUrl =
                this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
            },
          });
        },
      });
    },
    jubao() {
      if (this.reportType === "") {
        uni.showToast({
          title: "请选择举报类型",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      let token = uni.getStorageSync("token");
      const that = this;
      request({
        url: "app/myfriend/reportUser?uid=",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          token: token,
        },
        data: {
          reportId: that.invitationId,
          reportType: that.reportType,
          giveExample: that.text,
          giveExampleFile: that.fileUrl,
          businessType: this.typeId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          if (this.type == 2) {
            uni.showToast({
              title: "反馈成功",
              duration: 1500,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: "举报成功",
              duration: 1500,
              icon: "none",
            });
          }

          setTimeout(function () {
            uni.navigateBack({
              delta: 1,
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: [this.photo],
        current: 0,
      });
    },
    imgsShan() {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.photo = "";
            this.fileUrl = "";
            //this.imgs.splice(index,1)
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.foot_ {
  width: 750rpx;
  height: 130rpx;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.btn {
  width: 686rpx;
  height: 74rpx;
  background: #2168eb;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-top: 18rpx;
}
.main {
  padding: 0 32rpx;

  .title {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 45rpx;
    padding: 35rpx 0;
  }

  .list_ {
    margin-bottom: 20rpx;
  }

  .list_ .row {
    display: flex;
    justify-content: space-between;
    padding: 23rpx 0;
    border-bottom: 2rpx solid #eee;

    .left {
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }

    .right {
      width: 38rpx;
      height: 38rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .xuan {
        position: relative;
        left: -7rpx;
        display: inline-block;
        width: 130%;
        height: 130%;
        border-radius: 50%;
      }
    }
  }
  .content {
    width: 686rpx;
    height: 160rpx;
    background: rgba(249, 249, 249, 1);
    border-radius: 8rpx;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
  }
  .imgs {
    display: flex;
    flex-wrap: wrap;
    .img {
      width: 118rpx;
      height: 118rpx;
      margin-bottom: 15rpx;
      margin-right: 15rpx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .shan {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: -8rpx;
        right: -8rpx;
      }
    }
    .push {
      border: 2rpx solid rgba(204, 204, 204, 1);
      box-sizing: border-box;
      width: 118rpx;
      height: 118rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 43rpx;
        height: 39rpx;
      }
    }
  }
  .footer {
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(33, 104, 235, 1);
    line-height: 30rpx;
    margin-top: 40rpx;
    padding-bottom: 145rpx;
    // margin-bottom: 200rpx;
  }

  // .btn{
  // 		margin: 0 auto;
  // 		margin-top: 55rpx;
  // 		 width:620rpx;
  // 		 height:74rpx;
  // 		 background:#2168EB;
  // 		 border-radius:37rpx;
  // 		 text-align: center;
  // 		 line-height: 74rpx;
  // 		 font-size:30rpx;
  // 		 font-family:PingFangSC-Regular,PingFang SC;
  // 		 font-weight:400;
  // 		 color:rgba(255,255,255,1);
  // 		 margin-bottom: 30rpx;
  // 	}
}
</style>
